<template>
	<view class="category">
		<!-- 头部 -->
		<view class="header">
			<text class="headerTitle active">分类</text>
			<image class="headerImg" src="../../static/images/search.png"></image>
		</view>
		<!-- main -->
		<view class="main">
			<view class="left">
				<view :class="currentIndex === index && 'active'" @click="currentIndex = index" class="leftItem" v-for="(c1,index) in categoryList" :key="c1.cateid">
					<text class="leftText">{{c1.name}}</text>
				</view>
			</view>
			<view class="right">
				<scroll-view class="rightScroll" scroll-y="true" >
					<view class="rightUp">
						<view class="upTitle">
							<text class="upTitle_1">{{currentCategoryUp2.title}}</text>
						</view>	
						<view class="upContainer">
							<view class="upItem" @click="toDetailList(up_c2)" v-for="(up_c2,index) in currentCategoryUp2.list" :key="up_c2.id_param">
								<image class="upItemImg" :src="up_c2.photo"></image>
								<text class="upItemName">{{up_c2.name}}</text>
							</view>
							
						</view>
					</view>
					<view class="rightDown">
							<view class="downTitle">
								<text class="downTitle_1">{{currentCategoryDown2.title}}</text>
							</view>	
							<view class="downContainer">
								<view class="downItem" v-for="(down_c2,index) in currentCategoryDown2.list" :key="down_c2.name" >
									<image class="downItemImg" :src="down_c2.logo"></image>
									<text class="downItemName">{{down_c2.name}}</text>
								</view>
							
							</view>
					</view>
				</scroll-view>
			</view>

		</view>
	</view>
</template>


<script>
	import {mapState} from 'vuex'
	export default {
		data() {
			return {
				currentIndex:0
			}
		},
		mounted() {
			this.getCategoryList()
		},
		methods: {
			getCategoryList(){
				this.$store.dispatch('getCategoryList')
			},
			// 点击去详情页
			toDetailList(up_c2){
				// 方法一
				// wx.navigateTo({
				// 	url:'/pages/detailList/detailList?goodsInfo=' + JSON.stringify(up_c2)
				// })
				// 方法二
				wx.setStorageSync('goodsInfo_key',up_c2)
				wx.navigateTo({
					url:'/pages/detailList/detailList'
				})
			}
		},
		computed:{
			...mapState({
				categoryList:state => state.category.categoryList
			}),
			// 计算当前点击的一级分类
			currentCategory1(){
				return this.categoryList[this.currentIndex] || {}
			},
			// 二级分类数据
			currentCategoryUp2(){
				return (this.currentCategory1.cate_list || [])[0] || {}
			},
			currentCategoryDown2(){
				return (this.currentCategory1.cate_list || [])[1] || {}
			},
		}
	}
</script>

<style lang="stylus">
	.category
		width 100%
		background-color #F3F4F5
		.header
			display flex
			flex-direction row
			align-items center
			height 80rpx
			// width 640rpx
			background-color #FFFFFF
			border-bottom 1rpx solid #999999
			box-sizing border-box
			.headerTitle
				display inline-block
				width 100rpx
				height 70rpx
				text-align center
				line-height 70rpx
				font-size 36rpx
				font-weight 600
				margin-left 320rpx
				&.active
					color #41C856
					border-bottom 5rpx solid #41C856
			.headerImg
				width 30rpx
				height 30rpx
				margin-left 250rpx
		.main
			display flex
			.left
				width 140rpx
				height 1000rpx
				background-color #FFFFFF
				.leftItem
					width 140rpx
					height 100rpx
					font-size 28rpx
					text-align center
					line-height 100rpx
					&.active
						background-color #F3F4F5
						color #41c856
			.right
				flex 1
				.rightScroll
					height calc(100vh - 100rpx)
					background-color #FFFFFF
					margin-top 20rpx
					margin-left 10rpx
					.rightUp
						width 600rpx
						// height 500rpx
						display flex
						flex-direction column
						flex-wrap wrap
						// border 1rpx solid pink
						box-sizing border-box
						.upTitle
							width 100%
							height 50rpx
							font-size 30rpx
							color #999999
							padding 0 0 0 20rpx
							line-height 50rpx
							margin-bottom 20rpx
						.upContainer
							display flex
							flex-wrap wrap
							.upItem
								width 170rpx
								height 170rpx
								margin-left 20rpx
								margin-bottom 60rpx
								.upItemImg
									width 170rpx
									height 170rpx
								.upItemName
									display inline-block
									width 170rpx
									height 40rpx
									font-size 28rpx
									text-align center
									
						
					.rightDown
						width 600rpx
						display flex
						flex-wrap wrap
						.downTitle
							width 100%
							height 50rpx
							font-size 30rpx
							color #999999
							padding 0 0 0 20rpx
							line-height 50rpx
							
						.downContainer
							display flex
							flex-wrap wrap
							align-items center
							justify-content center
							.downItem
								display flex
								flex-wrap wrap
								align-items center
								justify-content center
								width 268rpx
								height 170rpx
								margin-left 20rpx
								margin-bottom 60rpx
								.downItemImg
									width 200rpx
									height 120rpx
								.downItemName
									display inline-block
									width 268rpx
									height 40rpx
									font-size 28rpx
									text-align center
									white-space nowrap
									text-overflow ellipsis
									overflow hidden
</style>
